<template>
  <div style="background-color: white; margin-top: -5px; min-height: 100vh;">
    <van-sticky :offset-top="47">
      <el-alert
        :title="infoAlert.title"
        :type="infoAlert.type"
        center
        show-icon
        :closable="false"
      ></el-alert>
    </van-sticky>
    <van-form @submit="submitForm">
      <searchable-picker
        v-model="form.orderId"
        :columns="orderList"
        valueKey="orderId"
        labelKey="orderName"
        label="项目名称"
        placeholder="请选择项目"
        readonly
      />

      <searchable-picker
        v-model="form.customerId"
        :columns="customerList"
        valueKey="customerId"
        labelKey="customerName"
        label="客户名称"
        placeholder="请选择客户名称"
        readonly
      />

      <van-field
        v-model="form.totalMoney"
        label="合同金额"
        placeholder="请输入合同金额"
        type="number"
        :rules="[{ required: true, message: '请输入合同金额' }]"
      />

      <van-field
        v-model="form.totalTime"
        label="合同时间"
        placeholder="请选择合同时间"
        @click="projectTimeFlag = true"
        :rules="[{ required: true, message: '合同时间不能为空' }]"
      />
      <van-calendar
        v-model="projectTimeFlag"
        @confirm="onConfirm($event, 'projectTimeFlag', 'totalTime')"
        :min-date="minDate"
        :max-date="maxDate"
      />

      <van-field v-model="form.remark" label="备注" placeholder="请输入备注" />

      <searchable-picker
        v-model="form.isContract"
        :columns="dict.type.crm_yes_no"
        valueKey="value"
        labelKey="label"
        label="是否有合同"
        placeholder="请选择是否有合同"
        :rules="[{ required: true, message: '是否有合同不能为空' }]"
      />

      <van-field
        name="uploader"
        label="电子合同"
        v-if="form.isContract === '1'"
      >
        <template #input>
          <file-upload v-model="form.contractUrl" />
        </template>
      </van-field>

      <searchable-picker
        v-model="form.isPurchaseContract"
        :columns="dict.type.crm_yes_no"
        valueKey="value"
        labelKey="label"
        label="是否有采购合同"
        placeholder="请选择是否有采购合同"
        :rules="[{ required: true, message: '是否是否有采购合同' }]"
      />

      <van-field
        name="uploader"
        label="采购合同"
        v-if="form.isPurchaseContract === '1'"
      >
        <template #input>
          <file-upload v-model="form.purchaseContractUrl" />
        </template>
      </van-field>

      <div class="mobile-footer">
        <van-button
          native-type="submit"
          style="width: 49%; border-radius: 10px"
          @click="auditStatus = '0'"
          >暂存</van-button
        >
        <van-button
          type="info"
          native-type="submit"
          style="width: 49%; border-radius: 10px"
          @click="auditStatus = '1'"
          >提交</van-button
        >
      </div>
    </van-form>
  </div>
</template>
<script>
import {
  addContract,
  updateContract,
  getContractInfo,
} from "@/api/crm/contract";

import { getProject } from "@/api/crm/project";
import { getCustomerList } from "@/api/crm/customer";
import { getOrderListAll } from "@/api/crm/order";

export default {
  name: "Contract",
  dicts: ["crm_yes_no"],
  data() {
    return {
      minDate: new Date(2010, 0, 1),
      maxDate: new Date(2030, 0, 31),
      // 表单参数
      form: {},
      projectInfo: {},
      customerList: [],
      orderList: [],
      projectTimeFlag: false,
      auditStatus: '',
      infoAlert: {
        type: "info",
        title: "待填写",
      },
    };
  },
  async created() {
    this.projectId = this.$route.params.projectId;
    await this.getProject();
    await this.getCustomerList();
    await this.getOrderList();
    await this.getData();
  },
  methods: {
    getProject(projectId) {
      getProject(projectId).then((res) => {
        this.projectInfo = res.data;
      });
    },
    onConfirm(date, flag, fildes) {
      this[flag] = false;
      this.form[fildes] = `${date.getFullYear()}-${
        date.getMonth() + 1
      }-${date.getDate()}`;
    },
    getData() {
      getContractInfo({ projectId: this.projectId }).then((res) => {
        if (res.data) {
          this.form = res.data;
          switch (this.form.auditStatus) {
            case "0":
              this.infoAlert = { type: "info", title: "待提交" };
              break;
            case "1":
              this.infoAlert = { type: "warning", title: "待审核" };
              break;
            case "2":
              this.infoAlert = { type: "success", title: "审核通过" };
              break;
            case "3":
              this.infoAlert = { type: "error", title: "审核不通过" };
              break;
            case "4":
              this.infoAlert = { type: "warning", title: "审核中" };
              break;
          }
        } else {
          this.infoAlert = { type: "info", title: "待填写" };
          this.form.projectId = this.projectInfo.projectId;
          this.form.orderId = this.projectInfo.orderId;
          this.form.customerId = this.projectInfo.customerId;
          this.form.auditStatus = "0";

          this.$set(this.form, "totalTime", new Date());
          this.$set(this.form, "totalMoney", this.projectInfo.amount);
          this.$set(this.form, "isPurchaseContract", "1");
          this.$set(this.form, "isContract", "1");
        }
      });
    },
    getCustomerList() {
      getCustomerList().then((res) => {
        this.customerList = res.data;
      });
    },
    getOrderList() {
      getOrderListAll({}).then((res) => {
        this.orderList = res.data;
      });
    },
    // 取消按钮
    cancel() {
      this.reset();
      this.$emit("cancel");
    },
    // 表单重置
    reset() {
      this.form = {
        contractId: null,
        orderId: null,
        projectId: null,
        totalMoney: null,
        totalTime: null,
        contractUrl: null,
        isContract: null,
        purchaseContractUrl: null,
        isPurchaseContract: null,
        remark: null,
        isPurchaseContract: "1",
        isContract: "1",
      };
      this.resetForm("form");
    },
    submitForm() {
      this.form.auditStatus = this.auditStatus;
      if (this.form.contractId != null) {
        updateContract(this.form).then((response) => {
          this.$toast.success("修改成功");
          this.getData();
        });
      } else {
        addContract(this.form).then((response) => {
          this.$toast.success("新增成功");
          this.getData();
        });
      }
    },
  },
};
</script>

